<script setup lang="ts">
defineProps<{
  title: string;
  tagList: string[];
  activeIndex: number;
}>();

const emits = defineEmits<{
  (e: "change", index: number): void;
}>();
</script>

<template>
  <div flex items-center>
    <div font-bold n-link mr-20px>{{ title }}:</div>
    <div
      border
      px4
      py1
      rounded
      cursor-pointer
      @click="() => emits('change', index)"
      :class="
        activeIndex == index ? 'bg-primary text-white font-bold' : 'n-link'
      "
      v-for="(item, index) in tagList"
      :key="index"
    >
      {{ item }}
    </div>
  </div>
</template>

<style scoped></style>
